<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
  <div class="supplier-status-card">
    <div class="card-header">
      <h3>供应商状态</h3>
      <div class="header-actions">
        <el-button type="primary" size="small" @click="handleAddSupplier">
          <el-icon><Plus /></el-icon>添加供应商
        </el-button>
        <el-button type="info" plain size="small" @click="handleViewAll">
          查看全部
        </el-button>
      </div>
    </div>
    
    <div class="supplier-statistics">
      <div v-for="(item, index) in supplierStatus" :key="index" class="supplier-type">
        <div class="supplier-info">
          <div class="supplier-label">{{ item.label }}</div>
          <div class="supplier-count">{{ item.count }}</div>
        </div>
        <el-progress 
          :percentage="item.percentage" 
          :color="item.color" 
          :stroke-width="8"
          :format="() => ''"
        />
      </div>
    </div>
    
    <div class="pending-suppliers">
      <div class="section-title">
        <span>供应商审核 ({{ pendingSuppliers.length }})</span>
      </div>
      
      <el-empty v-if="pendingSuppliers.length === 0" description="暂无待审核供应商" :image-size="80"></el-empty>
      
      <el-scrollbar max-height="240px">
        <div v-for="supplier in pendingSuppliers" :key="supplier.id" class="supplier-item">
          <div class="supplier-details">
            <div class="supplier-name">{{ supplier.name }}</div>
            <div class="supplier-type">{{ supplier.type }}</div>
            <div class="apply-time">申请时间：{{ supplier.applyTime }}</div>
          </div>
          <div class="supplier-actions">
            <el-button type="success" size="small" @click="handleApprove(supplier.id)">通过</el-button>
            <el-button type="danger" size="small" @click="handleReject(supplier.id)">拒绝</el-button>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Plus } from '@element-plus/icons-vue'

interface SupplierStatusItem {
  label: string
  count: number
  percentage: number
  color: string
}

interface PendingSupplier {
  id: number
  name: string
  type: string
  applyTime: string
}

export default defineComponent({
  name: 'SupplierStatusCard',
  components: {
    Plus
  },
  props: {
    supplierStatus: {
      type: Array as PropType<SupplierStatusItem[]>,
      required: true
    },
    pendingSuppliers: {
      type: Array as PropType<PendingSupplier[]>,
      required: true
    }
  },
  emits: ['view-all', 'add-supplier', 'approve', 'reject'],
  setup(props, { emit }) {
    // 查看全部供应商
    const handleViewAll = () => {
      emit('view-all')
    }
    
    // 添加供应商
    const handleAddSupplier = () => {
      emit('add-supplier')
    }
    
    // 审批通过
    const handleApprove = (id: number) => {
      emit('approve', id)
    }
    
    // 拒绝
    const handleReject = (id: number) => {
      emit('reject', id)
    }
    
    return {
      handleViewAll,
      handleAddSupplier,
      handleApprove,
      handleReject
    }
  }
})
</script>

<style scoped lang="scss">
.supplier-status-card {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 20px;
  height: 450px;
  display: flex;
  flex-direction: column;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .supplier-statistics {
    margin-bottom: 20px;
    
    .supplier-type {
      margin-bottom: 15px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .supplier-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        
        .supplier-label {
          font-size: 14px;
          color: #606266;
        }
        
        .supplier-count {
          font-size: 14px;
          font-weight: 600;
          color: #303133;
        }
      }
    }
  }
  
  .pending-suppliers {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #EBEEF5;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
    
    .supplier-item {
      padding: 12px;
      margin-bottom: 10px;
      border-radius: 4px;
      background-color: #F8F9FA;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .supplier-details {
        .supplier-name {
          font-size: 14px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .supplier-type {
          font-size: 12px;
          color: #409EFF;
          background-color: rgba(64, 158, 255, 0.1);
          padding: 2px 6px;
          border-radius: 2px;
          display: inline-block;
          margin-bottom: 5px;
        }
        
        .apply-time {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .supplier-actions {
        display: flex;
        gap: 10px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .supplier-status-card {
    height: auto;
    
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      
      h3 {
        margin-bottom: 10px;
      }
      
      .header-actions {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
    }
    
    .supplier-item {
      flex-direction: column;
      align-items: flex-start;
      
      .supplier-details {
        margin-bottom: 10px;
        width: 100%;
      }
      
      .supplier-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}
</style> 